<template>
  <view style="padding: 10px;">
    <view class="" style="color: #fff;">
    	<text>我的卡（{{ userBank && userBank.total }}张）</text>
    </view>
    <view class="list" v-for="(bankCard, index) in userBank.rows" :key="index">
    	<view class="list-item" >
    	  <image src="/static/ABC.png" mode=""></image>
    	  <view class="" style="margin: 0 20px;">
    	  	<view>{{ bankCard.bankName }}</view>
    	  	<view style="font-size: 22px;padding: 5px 0;">{{ bankCard.bankcard }}</view>  	
    	  </view>
    	</view>
    </view>
	
	<view class="action-btn-group">
		<button type="primary" class=" action-btn no-border buy-now-btn " @click="">+ 绑定银行卡 </button>
		<uni-icons type="right" size="22" color="grey"></uni-icons>
	</view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import { userBank } from '@/api/user.js';

export default {
  data() {
    return {
      authentication: true,
      userBank: null
    };
  },
  computed: {
    ...mapState(['hasLogin', 'userprove'])
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      userBank().then(res => {
        if (res.code === 200) {
          this.userBank = res;
        }
      });
    },
  }
};
</script>




<style lang="scss">

.list{
	background: linear-gradient(to right, #00b9a3, #0098ac);
	border-radius: 10px;
	padding: 20px;
	margin: 10px 0;
}

.list-item {
	
	font-size: 16px;
  display: flex;
  align-items: center;
  
  color: #fff;
  margin:10px 0;
  input{
	  color: #6e6f7e;
	  margin-right: 10px;
  }
  image{
	  width: 60px;
	  height: 60px;
  }
}
.action-btn-group{
	    height: 90rpx;
	    border-radius: 100px;
	    overflow: hidden;
	    align-items: center;
	    background: #262c44;
	    margin-top: 20px;
	    position: relative;
	    line-height: 90rpx;
	    padding: 0 10px;
	    justify-content: space-between;
	    display: flex;
			.action-btn{
				display:flex;
				align-items: center;
				justify-content: center;
				width: 180upx;
				height: 100%;
				font-size: $font-base ;
				padding: 0;
				border-radius: 0;
				background: transparent;
			}
		}


</style>
